<template>	
	<section class="select-main">   
		<div class="sort-list">
			<div v-for="(value, key) in address" v-if="address[key].orgName" class="sort-item">
				<div class="sort-item-container" @click="chooseType(key, address[key].parentKey, address[address[key].parentKey] ? address[address[key].parentKey].orgId : address[key].orgId)">
					<div class="sort-item-border">
						<span> <span class="txt">{{address[key].orgName}}</span> <i class="icon icon-arror-down1"></i></span>		    			
					</div>
				</div>	
				<div class="sort-con">	
					<transition name="showlist">	
						<section v-if="address[key].list.length > 6" v-show="chooseIndex === key && isCover" class="max sort-detail-type">
							<dy-scroll-lock :bodyLock='isCover' :parentlock='isCover' class="sort-list-container">
								<div v-for="(item, liIndex) in address[key].list" class="sort-list-li" @click="chooseItem(key, item.orgId, item.orgName, liIndex)">  
									<p :class="{'sort-select': item.orgId == address[key].orgId}">
										<span>{{item.orgName}}</span>
										<span class="icon icon-complete fr"></span>
									</p>
								</div>
							</dy-scroll-lock>
							<p @touchmove.prevent>上下可滑动</p>
						</section>
						<section v-else v-show="chooseIndex === key && isCover" class="sort-detail-type">
							<ul class="sort-list-container" @touchmove.prevent>							
								<li v-for="(item, liIndex) in address[key].list" class="sort-list-li" @click="chooseItem(key, item.orgId, item.orgName, liIndex)">  
									<p :class="{'sort-select': item.orgId == address[key].orgId}">
										<span>{{item.orgName}}</span>
										<span class="icon icon-complete fr"></span>
									</p>
								</li>	    				
							</ul>
						</section>
					</transition>
				</div>	
			</div> 			
		</div>			
		<div class="back-cover" @click="closeCover" @touchmove.prevent v-show="isCover"></div>
	</section>
</template>
<script>
/**
 * @param {Array} address 对象数组
 * @param {String} address[i].name 当前菜单
 * @param {String} address[i].id 根据id查询列表
 * @param {Array} address[i].menuList 顶部菜单列表
 */
 import {merge, Event} from '@/utils/index'
 export default {
 	name: 'dy-select',
 	data () {	
 		return {
 			isCover: false,
 			chooseIndex: '',	
 			address: {
 				levelData1:{
 					orgName : '大区',
 					orgId: '-1',
 					parentKey : 'levelData0',	
 					list: [],
 				},levelData2:{
 					orgName : '区域',
 					parentKey : 'levelData1',
 					orgId: '-2',
 					list: [
 					{
 						orgName: '全部区域',
 						orgId: '-2',
 					}
 					]
 				},levelData3:{
 					orgName : '城市',
 					parentKey : 'levelData2',
 					orgId: '-3',
 					list: [
 					{
 						orgName: '全部城市',
 						orgId: '-3',
 					}
 					]
 				},levelData4:{
 					orgName : '营业部',
 					parentKey : 'levelData3',
 					orgId: '-4',
 					list: [
 					{
 						orgName: '全部营业部',
 						orgId: '-4',
 					}
 					]
 				},	 		
 			}		
 		}
 	}, 	
 	mounted () { 
 		let detailCondit = this.$store.getters.detailCondit;		
 		if(Object.keys(detailCondit).length > 0) { 			
 			this.address = {
 				levelData1 : detailCondit.condit.levelData1,
 				levelData2 : detailCondit.condit.levelData2,
 				levelData3 : detailCondit.condit.levelData3,
 				levelData4 : detailCondit.condit.levelData4
 			}

 			this.$store.commit('orgId', detailCondit.condit.collectCondit.param.orgId)
 			let conditName = detailCondit.conditName
 			let startCondit = {
 				themeCode: 1,
 				conditName: conditName,
 				condit: this.address
 			}
 			this.$store.commit('startCondit', startCondit) 			
 			this.$store.commit('addressData', this.address)
 		} else {
 			let startCondit = this.$store.getters.startCondit;
 			if(Object.keys(startCondit).length > 0) {
 				this.$store.commit('orgId', startCondit.condit.levelData4.orgId)
 				this.address = {
 					levelData1 : startCondit.condit.levelData1,
 					levelData2 : startCondit.condit.levelData2,
 					levelData3 : startCondit.condit.levelData3,
 					levelData4 : startCondit.condit.levelData4
 				}
 			} else {
 				api.findAllDefaultOrgList().then(data => { 	
 					this.$store.commit('addressData', data)
 					this.mergeAddress(data)
 				})
 			}
 		} 		
 	},
 	computed: {
 		headerData () {
 			return this.$store.getters.headerData;
 		} 	   
 	},
 	methods : {	
 		closeCover () {
 			this.isCover = false
 		},
 		chooseType (key, parentKey, orgId) {
 			this.isCover = !this.isCover
 			this.chooseIndex = key

 			// 默认有个全区一条数据
 			if(this.address[key].list.length < 2 && 
 				(this.address[parentKey] ? this.address[parentKey].orgId != this.address[parentKey].list[0].orgId : this.address[key].orgId == this.address[key].list[0].orgId)
 				) {
 				api.findChildrenOrgList({orgId:orgId}).then(data => { 	
 					this.address[key].list.splice(1, this.address[key].list.length)
 					this.address[key].list = this.address[key].list.concat(data.list) 				
 				})
	 		}
	 	},
 		// 选择地区
 		chooseItem (key, orgId, orgName, itemIndex) {	 			
 			this.isCover = false;
 			// 选中的地区名 赋值			
 			this.$store.commit('orgId', orgId)
 			// 当前下标
 			let index = key.match(/\d/)[0]
 			// 下级下标
 			let nextIndex = parseInt(index) + 1
 			//
 			if(itemIndex != 0) {
 				api.findChildrenOrgList({orgId:orgId}).then(data => { 	
		 			// 下级地区修改
		 			if(nextIndex < 5) {
		 				this.address['levelData'+nextIndex].list.splice(1, this.address['levelData'+nextIndex].list.length)
		 				this.address['levelData'+nextIndex].list = this.address['levelData'+nextIndex].list.concat(data.list)
		 			}		
		 			this.conditAddress (key, orgId, orgName, index, nextIndex)
		 		})
 			} else {
 				this.conditAddress (key, orgId, orgName, index, nextIndex)
 			}
 		},
 		//  收藏地址
 		conditAddress (key, orgId, orgName, index, nextIndex) {
 			this.$set(this.address[key], 'orgId', orgId)			
 			let startCondit = this.$store.getters.startCondit
 			startCondit.conditName = ''
 			// 下面级的节点变动
 			for(let i = 1; i < 5; i++) {
 				if(i == index) {					
 					startCondit.conditName += orgName + (i != 4 ? '-' : '')
 					this.address[key].orgName = orgName.replace('全部', '') 	
 				} else if(i >= nextIndex ) {
 					this.address['levelData'+i].orgId = orgId
 					startCondit.conditName += this.address['levelData'+i].list[0].orgName + (i != 4 ? '-' : '')
 					this.address['levelData'+i].orgName = this.address['levelData'+i].list[0].orgName.replace('全部', '')
 					this.address['levelData'+i].list[0].orgId = orgId
 					this.address['levelData'+i].list.splice(1, this.address['levelData'+i].list.length -1)
 				} else {
 					startCondit.conditName += this.address['levelData'+i].orgName + (i != 4 ? '-' : '')
 				}
 			}

 			startCondit.condit = this.address 			
 			this.$store.commit('startCondit', startCondit)
 			this.$store.commit('addressData', this.address)
 		},
 		// 合并地区
 		mergeAddress (data) {
 			let parentKey = 'levelData0'	
 			let conditName = ''
 			this.address.levelData1.list = this.address.levelData1.list.concat(data.levelData0.list)

 			for (let key in this.address) {
 				if(data[key].list.length > 0) {
 					this.address[key].orgId = data[key].list[0].orgId	 					
 					this.address[key].orgName = data[key].list[0].orgName	
 					conditName += data[key].list[0].orgName + (key != 'levelData4' ? '-' : '')
 					parentKey = key;		

					//
					if(this.address[key].list[0].orgId < 0) {
						this.address[key].list[0].orgId = data['levelData'+(key.match(/\d+/)[0] -1)].list[0].orgId
					}		
				} else {	 			
					let orgId = data[parentKey].list[0].orgId;	
					this.address[key].orgId = orgId
					this.address[key].list[0].orgId = orgId;					
					conditName += this.address[key].list[0].orgName + (key != 'levelData4' ? '-' : '')
				}
				this.address[key].list = this.address[key].list.concat(data[key].list)
			} 					

 			// 权限 orgId
 			this.$store.commit('orgId', data[parentKey].list[0].orgId)

 			// 收藏 地址
 			let startCondit = {
 				themeCode: 1,
 				conditName: conditName,
 				condit: this.address
 			}
 			this.$store.commit('startCondit', startCondit)
 		}
 	},
}
</script>
<style lang="less" scope>	
@import '../assets/less/base.less';
.select-main {
	position: fixed;
	left: 0;
	top: 2rem;
	width: 100%;
	height: 1.7rem;
	background-color: #fff;
	z-index: 10;

 	.sort-list{
 		border-bottom: @border;
 		width: 100%;
 		display: -webkit-flex; /* Safari */
 		display: flex;
 		z-index: 10;
 		box-sizing: border-box;
 		position: relative;
 		height: 1.7rem;
 		background-color: #fff;
 		z-index: 11;

 		.sort-con {
 			.sort-detail-type{
 				width: 100%;
 				position: absolute;
 				top: 1.71rem;
 				left: 0;
 				background-color: #fff;
 				z-index: 11;
 				&>p{
 					display: none;
 				}

 				&.max>p{
 					display: block;
 					height: 1.4rem;
 					line-height: 1.4rem;
 					font-size: .55rem;
 					color: #dbdbdb;
 				}
 			}   

 			.sort-list-container{
 				max-height: 12rem;
 				overflow-y: scroll;
 				width: 100%;

 				.sort-list-li{
 					height: 2rem;
 					display: flex;
 					align-items: center;	           


 					p {
 						padding: 0 .45rem;
 						line-height: 2rem;
 						flex: auto;
 						text-align: left;
 						text-indent: 0.25rem;
 						border-bottom: @border;
 						align-items: center;
 						span{
 							color: @h2-color;
 						}
 					}


 					.sort-select{
 						span{
 							color: @on-color;
 						}

 						.icon {
 							display: block;
 						}
 					}

 					.icon {
 						display: none;
 					}

 				}

 			}   
 		}

 		.sort-item{
 			text-align: center; 		
 			-webkit-box-align: center;
 			flex: 1;

 			&.choose-type{
 				.sort-item-container{
 					.triangle{
 						transform: rotate(180deg);
 					}
 				}
 			} 

 			.sort-item-container{
 				position: relative;
 				z-index: 14;
 				background-color: #fff;
 				box-sizing: border-box;
 				padding: .2rem 0;
 				height: 1.645rem;
 				line-height: 1.645rem;

 				.sort-item-border{
 					height: 1.2rem;
 					line-height: 1.2rem;
 					border-right: @border;

 					.txt{
 						display: inline-block;
 						max-width: 2.5rem;
 						height: 1.2rem;
 						overflow: hidden;
 						vertical-align: middle;
 					}
 				}
 			}
 			.icon{
 				vertical-align: middle;
 				transition: all .3s;
 				font-size: .5rem;
 			}
 		} 	
 	}
}
</style>
